<template>
    <div>
      <!-- 创建导航栏，左侧有一个按钮用于触发侧边导航栏的显示 -->
      <van-nav-bar @click-left="back()" fixed>
        <template #left>
          <van-icon name="arrow-left" size="18" />
        </template>
        <template #title>
          {{ titlename }}
        </template>
        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
            placement="bottom-end"
          >
            <template #reference>
              <van-icon name="add" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
      <van-action-sheet v-model="show" :actions="actions2" @select="onSelect2" />
      <!-- 内容区域 -->
      <!-- <form action="/">
        <van-search
          v-model="value"
          placeholder="导入成员姓名"
          input-align="center"
          shape="round"
          style="margin-top: 48px;"
          @search="onSearch1()"
        />
      </form> -->
      <!-- <form action="/">
          <div class="flex-container">
            <van-button 
          type="info"
          @click.prevent="onSearch1(), check()"
          class="flex-item"
          >查询</van-button
        >
        <van-button type="primary" @click.prevent="checkAll()" class="flex-item">全选</van-button>
        <van-button type="info" @click.prevent="ReverseAll()" class="flex-item">反选</van-button>
          </div>
      </form> -->
    </div>
  </template>
    
    <script>
  // import { EventBus } from '../../eventbus';
  export default {
    data() {
      return {
        value: "",
        titlename: "坚毅不倒！！！",
        showPopover: false,
        // 通过 actions 属性来定义菜单选项
        actions: [
          { text: "班级导入", value: "memberImport" },
          { text: "班级管理", value: "memberManage" },
        ],
        show: false,
        actions2: [
          { name: "选择导入", value: "selectImport" },
        //   { name: "文件导入", value: "fileImport" },
        ],
      };
    },
    methods: {
      onSearch1() {
        console.log(this.value);
      },
      ToCreateCourse() {
        this.$router.push("/CreateCourse");
      },
      back() {
    this.$router.go(-1);
  },
      // onSelect(action) {
      //   this.show = true;
      // },
      onSelect(action) {
        if (action.value === "memberImport") {
          this.show = true;
        }
        if (action.value === "memberManage") {
          alert(action.text);
        }
      },
      onSelect2(action) {
        if (action.value === "selectImport") {
          this.$router.push("/SelectImport");
        }
        if (action.value === "fileImport") {
          const input = document.createElement("input");
          input.type = "file";
          input.click();
  
          input.addEventListener("change", function () {
            // 处理选择文件后的逻辑
            const selectedFile = input.files[0];
            console.log(selectedFile);
          });
        }
      },
      updateTitle(newTitle) {
        this.titlename = newTitle;
        this.$forceUpdate();
      },
    },
    mounted() {
      // EventBus.$once("titleName", (titlename) => {
      //   this.updateTitle(titlename);
      //   // this.titlename = titlename;
      //   console.log(this.titlename);
      // });
      this.updateTitle(this.$route.params.titlename);
      console.log(this.$route.params.titlename);
    },
  };
  </script>
    
    
    <style scoped>
    .blue-text {
    color: skyblue;
  }
  
  .red-text {
    color: rgb(116, 193, 0);
  }
  
  .search-btn {
    margin-left: 10%;
    margin-top: 10%;
    width: 80%;
    position: absolute;
    bottom: 20%;
  }
  
  .img-icon {
    height: 20px;
  }
  
  .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* flex:1; */
  }
  
  .flex-item {
    flex: 1;
  }
  
  
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    transition: border-color 0.3s;
    cursor: pointer;
  }
  
  /* 复选框标记的样式 */
  input[type="checkbox"]:checked::before {
    content: "✔"; /* 选中后显示✔符号 */
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: white;
    border-radius: 50%; /* 使复选框变成圆形 */
    transition: border-color 0.3s;
    background-color: rgb(70, 175, 240); /* 选中后的背景色 */
    cursor: pointer;
  }
  
  input[type="checkbox"]:checked::after {
    display: none; /* 显示 ✔ 符号 */
  }
  </style>